<template>
  <div>
    <el-row>
      <el-col :span="8">
          <div  @mousemove="updateCrosshairx" @click="clickx" @wheel="handleMouseWheelx">
            <el-image :src="imageUrlX" style="width: 400px; height: 400px;"></el-image>
            <canvas ref="canvasx" :width="canvasWidth" :height="canvasHeight" class="canvasx"></canvas>
          </div>
      </el-col>
      <el-col :span="8">
          <div @mousemove="updateCrosshairy" @click="clicky" @wheel="handleMouseWheely">
          <el-image :src="imageUrlY" style="width: 400px; height: 400px;"></el-image>
            <canvas ref="canvasy" :width="canvasWidth" :height="canvasHeight" class="canvasy"></canvas>
          </div>
      </el-col>
      <el-col :span="8">
          <div @mousemove="updateCrosshairz" @click="clickz" @wheel="handleMouseWheelz">
          <el-image :src="imageUrlZ" style="width: 400px; height: 400px;"></el-image>
            <canvas ref="canvasz" :width="canvasWidth" :height="canvasHeight" class="canvasz"></canvas>
          </div>
      </el-col>
    </el-row>
    <el-card>
    <el-row gutter="15">
<!--      <el-col :span="6">
        <span class="demonstration">x轴参数</span>
        <el-slider v-model="valuex" :max="mvaluex" @change="getxyz"></el-slider>
      </el-col>
      <el-col :span="6">
        <span class="demonstration">y轴参数</span>
        <el-slider v-model="valuey" :max="mvaluey" @change="getxyz"></el-slider>
      </el-col>
      <el-col :span="6">
        <span class="demonstration">z轴参数</span>
        <el-slider v-model="valuez" :max="mvaluez" @change="getxyz"></el-slider>
      </el-col>-->
      <el-col :span="6">
        <el-button type="primary" @click="back">返回</el-button>
      </el-col>
    </el-row>
    </el-card>
  </div>

</template>
<script>

import { getxyz } from '@/api/ibrain/ibrain'

export default {

  created() {

  },
  mounted() {
    this.mvaluex = this.$route.query.x
    this.mvaluey = this.$route.query.y
    this.mvaluez = this.$route.query.z
    this.id = this.$route.query.id
    this.name = this.$route.query.name
    this.valuex = Math.floor((this.mvaluex)/2)
    this.valuey = Math.floor((this.mvaluey)/2)
    this.valuez = Math.floor((this.mvaluez)/2)
    this.getxyz()
  },
  data() {
    return {
      timer: null, // 定时器
      delay: 250, // 触发请求的延迟时间，单位：毫秒
      canvasWidth: 400, // Canvas宽度与图片宽度一致
      canvasHeight: 400, // Canvas高度与图片高度一致
      mouseX: 0, // 鼠标在容器内的X坐标
      mouseY: 0, // 鼠标在容器内的Y坐标
      name:undefined,
      id:null,
      base64Stringx: 'data:image/png;base64,',
      base64Stringy: 'data:image/png;base64,',
      base64Stringz: 'data:image/png;base64,',
      mvaluex:null,
      mvaluey:null,
      mvaluez:null,
      valuex:null,
      valuey:null,
      valuez:null,
    }
  },
  watch: {
    valuex(newValue, oldValue) {
      // 每次数据变化时，先清除之前的定时器
      clearTimeout(this.timer);

      // 设置新的定时器，在延迟时间内如果数据没有再次变化，则触发请求方法
      this.timer = setTimeout(() => {
        this.getxyz();
      }, this.delay);
    },
    valuey(newValue, oldValue) {
      // 每次数据变化时，先清除之前的定时器
      clearTimeout(this.timer);

      // 设置新的定时器，在延迟时间内如果数据没有再次变化，则触发请求方法
      this.timer = setTimeout(() => {
        this.getxyz();
      }, this.delay);
    },
    valuez(newValue, oldValue) {
      // 每次数据变化时，先清除之前的定时器
      clearTimeout(this.timer);

      // 设置新的定时器，在延迟时间内如果数据没有再次变化，则触发请求方法
      this.timer = setTimeout(() => {
        this.getxyz();
      }, this.delay);
    }
  },
  computed:{
    imageUrlX() {
      return this.base64Stringx;
    },
    imageUrlY() {
      return this.base64Stringy;
    },
    imageUrlZ() {
      return this.base64Stringz;
    }
  },
  methods:{
    handleMouseWheelx(event){
      if (event.deltaY > 0) {
        if(this.valuex<=0)
          this.valuex=0
        else {
          this.valuex = this.valuex-1
        }
      } else {
        if(this.valuex>=this.mvaluex)
          this.valuex=this.mvaluex
        else {
          this.valuex = this.valuex+1
        }
      }
    },
    handleMouseWheely(event){
      if (event.deltaY > 0) {
        if(this.valuey<=0)
          this.valuey=0
        else {
          this.valuey = this.valuey-1
        }
      } else {
        if(this.valuey>=this.mvaluey)
          this.valuey=this.mvaluey
        else {
          this.valuey = this.valuey+1
        }
      }
    },

    handleMouseWheelz(event){
      if (event.deltaY < 0) {
        if(this.valuez<=0)
          this.valuez=0
        else {
          this.valuez = this.valuez-1
        }
      } else {
        if(this.valuez>=this.mvaluez)
          this.valuez=this.mvaluez
        else {
          this.valuez = this.valuez+1
        }
      }
    },

    clickx(event){
      this.valuey = this.mvaluey-Math.floor(this.mouseX/400*this.mvaluey);
      if(this.valuey>=this.mvaluey)
        this.valuey=this.mvaluey;
      else if(this.valuey<=0)
        this.valuey=0;
      this.valuez = this.mvaluez-Math.floor(this.mouseY/400*this.mvaluez);
      if(this.valuez>=this.mvaluez)
        this.valuez=this.mvaluez
      else if(this.valuez<=0)
        this.valuez=0;
      const canvasy = this.$refs.canvasy;
      const canvasz = this.$refs.canvasz;
      const ctx_y = canvasy.getContext('2d');
      const ctx_z = canvasz.getContext('2d');
      ctx_y.clearRect(0, 0, canvasy.width, canvasy.height);
      ctx_z.clearRect(0, 0, canvasz.width, canvasz.height);

      this.getxyz();
    },
    clicky(event){
      this.valuex = this.mvaluex-Math.floor(this.mouseX/400*this.mvaluex);
      this.valuez = this.mvaluez-Math.floor(this.mouseY/400*this.mvaluez);
      if(this.valuex>=this.mvaluex)
        this.valuex=this.mvaluex
      else if(this.valuex<=0)
        this.valuex=0;
      if(this.valuez>=this.mvaluez)
        this.valuez=this.mvaluez
      else if(this.valuez<=0)
        this.valuez=0;
      const canvasx = this.$refs.canvasx;
      const canvasz = this.$refs.canvasz;
      const ctx_x = canvasx.getContext('2d');
      const ctx_z = canvasz.getContext('2d');
      ctx_x.clearRect(0, 0, canvasx.width, canvasx.height);
      ctx_z.clearRect(0, 0, canvasz.width, canvasz.height);

      this.getxyz();
    },
    clickz(event){
      this.valuex = this.mvaluex-Math.floor(this.mouseX/400*this.mvaluex);
      this.valuey = this.mvaluey-Math.floor(this.mouseY/400*this.mvaluey);
      if(this.valuex>=this.mvaluex)
        this.valuex=this.mvaluex
      else if(this.valuex<=0)
        this.valuex=0;
      if(this.valuey>=this.mvaluey)
        this.valuey=this.mvaluey
      else if(this.valuey<=0)
        this.valuey=0;
      const canvasx = this.$refs.canvasx;
      const canvasy = this.$refs.canvasy;
      const ctx_x = canvasx.getContext('2d');
      const ctx_y = canvasy.getContext('2d');
      ctx_x.clearRect(0, 0, canvasx.width, canvasx.height);
      ctx_y.clearRect(0, 0, canvasy.width, canvasy.height);


      this.getxyz();
    },

    updateCrosshairx(event) {
      const canvas = this.$refs.canvasx;
      const ctx = canvas.getContext('2d');
      const rect = event.target.getBoundingClientRect();


      // 更新鼠标位置
      this.mouseX = event.clientX - rect.left;
      this.mouseY = event.clientY - rect.top;

      // 清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制十字线
      ctx.beginPath();
      ctx.moveTo(this.mouseX, 0);
      ctx.lineTo(this.mouseX, rect.height);
      ctx.moveTo(0, this.mouseY);
      ctx.lineTo(rect.width, this.mouseY);
      ctx.strokeStyle = 'red';
      ctx.stroke();
    },
    updateCrosshairy(event) {
      const canvas = this.$refs.canvasy;
      const ctx = canvas.getContext('2d');
      const rect = event.target.getBoundingClientRect();


      // 更新鼠标位置
      this.mouseX = event.clientX - rect.left;
      this.mouseY = event.clientY - rect.top;

      // 清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制十字线
      ctx.beginPath();
      ctx.moveTo(this.mouseX, 0);
      ctx.lineTo(this.mouseX, rect.height);
      ctx.moveTo(0, this.mouseY);
      ctx.lineTo(rect.width, this.mouseY);
      ctx.strokeStyle = 'red';
      ctx.stroke();
    },
    updateCrosshairz(event) {
      const canvas = this.$refs.canvasz;
      const ctx = canvas.getContext('2d');
      const rect = event.target.getBoundingClientRect();


      // 更新鼠标位置
      this.mouseX = event.clientX - rect.left;
      this.mouseY = event.clientY - rect.top;

      // 清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制十字线
      ctx.beginPath();
      ctx.moveTo(this.mouseX, 0);
      ctx.lineTo(this.mouseX, rect.height);
      ctx.moveTo(0, this.mouseY);
      ctx.lineTo(rect.width, this.mouseY);
      ctx.strokeStyle = 'red';
      ctx.stroke();
    },

    getxyz(){
      let x = this.valuex;
      let y = this.valuey;
      let z = this.valuez;
      let name = this.name;
      let id = this.id;
      getxyz({x,y,z,id,name}).then(res=>{
        this.base64Stringx = 'data:image/png;base64,'+res.x
        this.base64Stringy = 'data:image/png;base64,'+res.y
        this.base64Stringz = 'data:image/png;base64,'+res.z
      })
    },
    back(){
      this.$router.push('/iBrain/calc');
    },
  },
}
</script>
<style>
/* 使用 flex 布局将图片居中 */
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px; /* 设置高度以使图像在垂直方向上居中 */
}
.canvasx {
  position: absolute; /* 设置绝对定位 */
  top: 0; /* 距离容器顶部距离 */
  left: 0; /* 距离容器左侧距离 */
 }
.canvasy {
  position: absolute; /* 设置绝对定位 */
  top: 0; /* 距离容器顶部距离 */
  left: 625px; /* 距离容器左侧距离 */
}
.canvasz {
  position: absolute; /* 设置绝对定位 */
  top: 0; /* 距离容器顶部距离 */
  left: 1250px; /* 距离容器左侧距离 */
}
</style>
